<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
	<title>${seo.title!''}</title>
	<meta name="description" content="${seo.describe!''}"/>
    <meta name="keywords" content="${seo.keyword!''}"/>
    <link href="/images/favicon.png" rel="shortcut icon" />
	<link rel="stylesheet" type="text/css" th:href="@{css/reception/bootstrap.css}"/> 
    <link rel="stylesheet" type="text/css" th:href="@{css/reception/style.css}"/>
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1199px)" th:href="@{css/reception/phone.css}"/>
	<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<![endif]-->
	<script>
	var _hmt = _hmt || [];
	(function() {
  		var hm = document.createElement("script");
  		hm.src = "https://hm.baidu.com/hm.js?ee2370df92169848f6c4395d9d488fc1";
  		var s = document.getElementsByTagName("script")[0]; 
  		s.parentNode.insertBefore(hm, s);
	})();
</script>
</head>
<body>
	<div id="index">
		<nav class="nav"></nav>
		<section>
			<div id="banner" class="carousel slide" data-ride="carousel">
			  <!-- 轮播图片 -->
			  <div class="carousel-inner">
			     ${str[0]!''}
			  </div>
			  <!-- 指示符 -->
			  <ul class="carousel-indicators">
			    ${str[1]!''}
			  </ul>
			  <!-- 左右切换按钮 -->
			  <a class="carousel-control-prev" href="#banner" data-slide="prev">
			    <!-- <span class="carousel-control-prev-icon"></span> -->
			    <img src="/images/index/icon_prev.png">
			  </a>
			  <a class="carousel-control-next" href="#banner" data-slide="next">
			    <!-- <span class="carousel-control-next-icon"></span> -->
			    <img src="/images/index/icon_next.png">
			  </a>
			</div>
			<div class="titles title_con">
				<!--<i></i>-->
				<h4>${list_1[0].text!''}</h4>
				<h5>${list_1[1].text!''}</h5>
			</div>
			<div class="index_plan visible">
				<div class="index_plan_title bg_eee">
					<div class="titles w1200">
						<h4>${list_1[2].text!''}</h4>
						<p>${list_1[3].text!''}</p>
					</div>
				</div>
				<div class="index_plan_con w1200 clearfloat container">
					<div class="row plan_img clearfloat visible">
						<div class="col-xs-12 col-sm-6">
							<img src="${list_1[4].imgurl!''}" title="${list_1[4].title!''}" alt="${list_1[4].alt!''}" style="height: 30vw;max-height: 405px;margin:0 auto;">
						</div>
						<div class="col-xs-12 col-sm-6">
							<img src="${list_1[5].imgurl!''}" title="${list_1[5].title!''}" alt="${list_1[5].alt!''}" style="max-width: 100%;width:auto;height: 30vw;max-height: 405px;margin:0 auto;">
						</div>
					</div>
					<div class="row plan_img clearfloat visible">
						<div class="col-xs-12 col-sm-6">
							<ul>
								<li>
									<a href="${list_1[6].url!''}">${list_1[6].text!''}</a>
								</li>
								<li>
									<a href="${list_1[7].url!''}">${list_1[7].text!''}</a>
								</li>
								<li>
									<a href="${list_1[8].url!''}">${list_1[8].text!''}</a>
								</li>
							</ul>
						</div>
						<div class="col-xs-12 col-sm-6 plan_imgD4" style="height: 35.6vw;max-height: 476px;">
							<div>
								<img src="${list_1[9].imgurl!''}" title="${list_1[9].title!''}" alt="${list_1[9].alt!''}">
								<p>如何让小孩快乐成长</p>
								<a href="${list_1[9].url!''}">了解更多</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="scienceSystem banner visible">
				<div class="scienceSystem_img">
					<img src="${list_1[10].imgurl!''}" title="${list_1[10].title!''}" alt="${list_1[10].alt!''}">
				</div>
			</div>
			<div class="index_news visible">
				<div class="titles w1200 container">
					<h4>新闻资讯</h4>
					<ul class="row clearfloat visible">
						<#list list_2 as li>
							<li class="col-xs-6 col-sm-6 col-md-4">
								<a href="/xwxq/${li.id!''}">
									<img src="${li.imgurl!''}" title="${li.title!''}" alt="${li.alt!''}">
									<p>${li.name!''}</p>
								</a>
							</li>
						</#list>
					</ul>
				</div>
			</div>
			<div class="links">
				<div class="w1200">
					<span>友情链接:</span>
					<#list list_3 as li>
							<a href="${li.url!''}">${li.name!''}</a>
					</#list>
				</div>
			</div>
		</section>
		<footer>
			<div class="footer"></div>
		</footer>
	</div>
    <script type="text/javascript" th:src="@{libs/jquery-2.1.0.min.js}"></script>
    <script type="text/javascript" th:src="@{libs/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{js/reception/style.js}"></script>
   	<script type="text/javascript">
	  	$(function(){
			var elmArr = [],
			$win = $(window);
			$(".visible").each(function(i,elm){
				$(elm).data("ot",$(elm).offset().top);
				elmArr.push(elm);
			});
			dealClass(1);
			$win.on("scroll",dealClass);

			function dealClass(isRemove){
				var top = $win.height() + $win.scrollTop();
				if(isRemove!=1){
					for (var i = 0,$elem; i < elmArr.length; i++){
						$elem = $(elmArr[i]);
						if ($elem.data("ot") <= top){
							$elem.addClass("visible");
							elmArr.splice(i, 1);--i;}
					}
				}else{
					for (var i = 0,$elem; i < elmArr.length; i++){
						$elem = $(elmArr[i]);
						if ($elem.data("ot") >= top){
							$elem.removeClass("visible");
						}
					}
				}
			}
		})

  	</script>
</body>
</html>